import * as React from 'react';
import { Form, Row, Col, Modal, Select, message } from 'antd';
import request from '@/http';
import './chooseStudent.less';
import { useState } from 'react';
import qs from 'qs';

const { Option } = Select;

interface CStudentEditObject {
  isModalVisible: boolean;
  id?: number;
  teacherName?: string;
  jobNumber?: number;
  identity?: string;
  gender?: string;
  phone?: number;
  positionId?: string;
  status?: string;
}

const ChooseStudent = (props: { editObject: CStudentEditObject }) => {
  const { editObject } = props;
  const [isModalVisible, setIsModalVisible] = React.useState(false);
  const [formObject] = Form.useForm();

  const modelOnOk = async () => {
    const data = await formObject.validateFields();
    console.log(data);
    const result: any = await request.post('/InsertStudentToCourse', {
      ...data,
      courseOnId: editObject.id,
    });
    if (result.success) {
      message.success('用户添加成功');
      setIsModalVisible(false);
    }
  };

  const modelOnCancel = () => {
    setIsModalVisible(false);
  };

  React.useEffect(() => {
    setIsModalVisible(editObject.isModalVisible);
    selectDataSource();
    if (editObject.id !== null) {
      formObject.setFieldsValue({
        teacherName: editObject.teacherName,
        jobNumber: editObject.jobNumber,
      });
    }
  }, [editObject]);

  const [GroupName, setGroupName] = useState([]);
  const [studentName, setStudentName] = useState([]);
  const selectDataSource = async () => {
    const result: any = await request.post(
      '/api/admin/course/TermSelCourse?isGraduation=0',
    );
    if (result.code == '200') {
      const data = result.data.map((user: any) => ({
        key: `user_${user.id}`,
        id: user.id,
        team_name: user.team_name, //组名
      }));
      setGroupName(data);

      const groupNameList = data.map((user: any) => ({
        id: user.id,
        team_name: user.team_name, //组名
      }));
      // console.log(groupNameList);
      const ds = {
        teamName: groupNameList.team_name,
        currentPage: 1,
        size: 5,
      };
      const resultStu: any = await request.post(
        '/TermSelTeamStudent',
        qs.stringify(ds),
      );
      console.log(resultStu);
      if (resultStu.code == '200') {
        const data = resultStu.data.data.map((user: any) => ({
          key: `user_${user.id}`,
          id: user.id,
          studentName: user.studentName, //组名
        }));
        setStudentName(data);
      }
    }
  };

  const changeValue = (value: any) => {
    console.log(value);
  };

  const layout = {
    labelCol: { span: 12 },
    wrapperCol: { span: 24 },
  };

  const flag = editObject.id !== null && editObject.id !== undefined;

  return (
    <>
      <Modal
        width={600}
        className="modal"
        title="选择学生"
        visible={isModalVisible}
        onCancel={modelOnCancel}
        onOk={modelOnOk}
        maskClosable={false}
        destroyOnClose
        okText="确认"
        cancelText="取消"
      >
        <Form
          className="form"
          name="editForm"
          form={formObject}
          preserve={false}
          {...layout}
        >
          <Row gutter={24} style={{ width: '100%' }}>
            <Col span={16}>
              <Form.Item label="选择分组" name="positionId">
                <Select
                  labelInValue
                  style={{ width: '100%' }}
                  placeholder="请选择"
                  onChange={changeValue}
                >
                  {(GroupName || []).map((GroupName: any) => {
                    return (
                      <option key={GroupName.id} value={GroupName.team_name}>
                        {GroupName.team_name}
                      </option>
                    );
                  })}
                </Select>
              </Form.Item>
              <Form.Item label="选择学生" name="status">
                <Select style={{ width: '100%' }} placeholder="请选择">
                  {(studentName || []).map((studentName: any) => {
                    return (
                      <option
                        key={studentName.id}
                        value={studentName.studentName}
                      >
                        {studentName.studentName}
                      </option>
                    );
                  })}
                </Select>
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
    </>
  );
};

export { ChooseStudent, CStudentEditObject };
